import React, { useMemo, useState } from 'react';
import { Input } from 'antd';
import { INodeComponent } from './type';

// import Editor from '@monaco-editor/react';
import { NodeCodeEditor } from './NodeCodeEditor';
import MyIcon from '@/components/MyIcon';

export const NodeCode: React.FC<INodeComponent> = (props) => {
  const [visible, setVisible] = useState<boolean>(false);
  const data = useMemo(() => {
    return props?.data;
  }, [props?.data]);

  const onFormChange = (value: any) => {
    if (value && props?.onChange) {
      props.onChange(value);
    }
  };

  const onOpen = () => {
    setVisible(true);
  };

  const onClose = () => {
    setVisible(false);
  };
  return (
    <>
      <Input
        readOnly
        value={props.value ?? ''}
        placeholder={`请填写${data.labelName}`}
        addonAfter={
          <span onClick={onOpen} style={{ cursor: 'pointer' }}>
            <MyIcon type="icon-code1" />
          </span>
        }
      />
      {visible && (
        <NodeCodeEditor
          onClose={onClose}
          title={data?.labelName}
          onFormChange={onFormChange}
          defaultValue={props?.value ?? []}
        />
      )}
    </>
  );
};
